<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .wrapper{
            width: 360px;
            height: 270px;
            margin: 50px auto;
            border: 1px solid red;
        }
        .left{
            float: left;
            list-style: none;
        }
        .right{
            float: right;
            list-style: none;
        }
        li{
            width: 80px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-bottom: 1px solid red;
            /* background-color: pink; */
            box-sizing: border-box;
            cursor: pointer;
        }
        .left li{
            border-right: 1px solid red;
        }
        .right li{
            border-left: 1px solid red;
        }
        .left li:last-child, .right li:last-child{
            border-bottom: none;
        }
        img{
            width: 200px;
            height: 250px;
        }
        .li-hover{
            background-color: pink;
            color: #fff;
        }
    </style>

</head>
<body>
    <div class="wrapper">
        <ul class="left">
            <li>冬裙</li>
        </ul>
        <img src="../image/jQuery/冬裙.jpg" alt="">
        <ul class="right">
            <li>冬裙</li>
        </ul>
    </div>

    <script src="../jquery/jquery.min.js"></script>
    <script>
        var arr = ['登山鞋','冬裙','毛衣','棉服','男包','男毛衣','男棉服','男靴','呢大衣','牛仔裤','女包','女裤','女靴','皮带','皮衣','围巾','雪地靴','羽绒服'];
        var str = '';
        // 动态生成li
        for (var i = 0; i < arr.length; i++) {
            str += '<li>' + arr[i] + '</li>';
            if (i === 8) {
                $('.left').html(str);
                str = '';
            }
        }
        $('.right').html(str);

        // 给每个li绑定事件
        $('li').on('mouseenter', function () {
            console.log(this);
            $('.li-hover').removeClass('li-hover');
            $(this).addClass('li-hover');
            $('img').attr('src', '../image/jQuery/' + $(this).text() + '.jpg');
        })
        // 鼠标移出大框子，清除li样式
        
        $('ul').on('mouseleave', function () {
            $('.li-hover').removeClass('li-hover');
        })
    </script>
</body>
</html>